<template>
    <div class='car_content'>
            <div v-for="(item,i) in cardata" :key="item.id" class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<mt-switch @change="updateselect(item.id,$store.getters.getselect[item.id])" style="padding-right:8px;" v-model="$store.getters.getselect[item.id]"></mt-switch>
                    <img style="padding-right:2px;" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2136520757,2828776706&fm=15&gp=0.jpg" alt="">
                    <div class='text'>
                        <h1>{{ item.title }}</h1>
                        <span style="color:red;font-weight:bold;">￥{{ item.sell_price }}</span>
                         <carbutton :updateid='item.id' :spannum='$store.getters. getoknum[item.id]' :carmax='item.stock_quantity' style="height:25px"></carbutton>
                         <a href="#" style="color:skyblue;font-size:14px" @click.prevent='del(item.id,i)'>删除</a>
                          
                    </div>                                   
					</div>
				</div>
			</div>
            <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner" style="justify-content:space-between">
						<div class='jiesuan'>
                            <p>总计(不含运费):</p>
                            <p>已勾选商品<span style="color:red;font-size:15px">{{ $store.getters.getprice.allproduct }}</span>   件
                                总价  
                                <span style="color:red;font-size:15px">￥{{ $store.getters.getprice.allprice }}</span>
                            </p>
                        </div>
                        <mt-button type='danger'>去结算</mt-button>
					</div>
				</div>
			</div>
           
    </div>
</template>

<script>
    import carbutton from './button/carbutton.vue'
     export default{
         data(){
             return{
               value:true,
               ids:[],
               cardata:[]
             }
         },
         created() {
             this.showdata()
         },
         methods: {
             showdata(){
                 this.$store.state.car.forEach(item=>{
                     this.ids.push(item.id)
                 })
                 if(this.ids.length<=0){
                     return;
                 }
                 
                 
                this.ids.forEach(item=>{
                    this.$http.get('api/goods/getinfo/'+item).then(data=>{
                        this.cardata.push(data.body.message[0])
                    })
                })
             },
             del(one,index){
                 this.cardata.forEach(result=>{
                     if(result.id==one){
                         this.cardata.splice(index,1)
                         return true
                     }
                 })
                 console.log(one)
              this.$store.commit('delcar',one)
             },
             updateselect(id,status){
                 console.log(id+'-----------'+status)
                 var b = {
                     id:id,
                     okstatus:status
                 }
                 this.$store.commit('updateselect',b) 
             }
         },
         components:{
             carbutton
         }
     }

</script>

<style lang="less" scoped>
.mui-numbox{
width: 115px;
}
.car_content{
    background-color: #eee;
    overflow: hidden;
    .mui-card-content-inner{
        display: flex;
        margin-left: 5px;
      
    }
    img{
        width: 40px;
        height: 60px;
        margin-right: 8px;
    }
    .text{
        h1{
            font-size: 13px;
        }
        span{
            font-size: 14px;
        }
    }
}
</style>
